﻿<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <base th:href="@{/}">
    <title>高校招生计划可视化系统</title>
    <head th:replace="commons/commons::commomcss"></head>

    <style type="text/css">
        /* 展示大屏布局 */
        #byarea{
            height:420px;
           
            position:relative;

        }
        #byprovince{
            position:relative;
            height:550px;         
            width: 720px;
            top: 10px;
            left: 50px;

        }

        #topnmax{
            height:280px;
                     
        }
        #topnmin{
            height:280px;
        }
      </style>
</head>
<body>

<div th:replace="commons/commons::pageheader">
</div>


<!-- begin::main -->
<div id="main">

    <!-- begin::navigation -->
    <div th:replace="commons/commons::pagenav(parentmenu='bigscreen',childmenu='bigscreen1')">
    </div>
    <!-- end::navigation -->

    <!-- begin::main-content -->
    <div class="main-content">

        <!-- begin::page-header 面包屑部分 -->
        <div class="page-header">
            <div class="container-fluid d-sm-flex justify-content-between">
                <h4>招生统计数据综合展示大屏</h4>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="#">首页</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">展示大屏</li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- end::page-header -->

        <!-- begin::page content -->
        <div class="container-fluid">

            <div class="row app-block">
                <div class="col-md-12 app-content">

                    <div class="card app-content-body">

                        <div class="card-body">                         
                            <div class="row">

                                <div id="big_screen_container">
                                      <!-- 各省招生计划-->
                                    <div id='byprovince'></div>          
                                    
                                    <!-- 热门专业Top10-->
                                        
                                    <div id='topnmax'></div>
                                       
                                         <!-- 冷门专业Top10-->                                      
                                    <div id='topnmin'></div> 
                                       
                                   
                                      <!--学生来源展示-->
                                    <div id='byarea'></div>

                             
                                </div>
                             
                            </div> 

                        </div>

                    </div>
                                      
                </div>
            </div>

            

        </div>
        <!-- end::page content -->

        <!-- begin::footer -->
        <footer th:replace="commons/commons::footer"></footer>
        <!-- end::footer -->

    </div>
    <!-- end::main-content -->

</div>
<!-- end::main -->
<div th:replace="commons/commons::commonscripts"></div>

<!-- echarts script begin-->
<script src="echarts/dist/echarts.min.js"></script>
<script src="echarts/theme/china.js"></script>
<script src="echarts/theme/mytheme.js"></script>

<!-- echarts script end-->

<script type="text/javascript">
    var area_dom = document.getElementById("byarea");
    var areaChart = echarts.init(area_dom);
    var app = {};
    option = null;
    option = {
         title: {
             text: '学生来源分析',
             subtext: '2016年招生计划',
             left: 'center'
         },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            left: 'center',
            top: 'bottom',
            data: ['东北', '华东', '华中', '华北', '华南', '西北', '西南']
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
              
                magicType: {
                    show: true,
                    type: ['pie', 'funnel']
                },

            }
        },
        series: [
            {
                name: '学生来源',
                type: 'pie',
                radius: [10, 100],
                center: ['50%', '40%'],
                roseType: 'area',
                data: [(${areaPlanData})],
            }
        ]
    };
    ;
    if (option && typeof option === "object") {
        areaChart.setOption(option, true);
    }
           </script>

<!--地图方式显示各省招生数据-->
<script type="text/javascript">
var dombyprovince = document.getElementById("byprovince");
var provinceChart = echarts.init(dombyprovince);

var name_title = "全国高校2016年各省市计划招生人数"
// 使用中国地图
var mapName = 'china'
//要在地图上展示的数据
var data = [(${provincePlanData})];

var geoCoordMap = {};


/*获取地图数据*/
provinceChart.showLoading();
var mapFeatures = echarts.getMap(mapName).geoJson.features;
provinceChart.hideLoading();
mapFeatures.forEach(function(v) {
// 地区名称
var name = v.properties.name;
// 地区经纬度
geoCoordMap[name] = v.properties.cp;


});

//convertData函数，组装在地图上展示的数据，包含省份的经纬度坐标和业务数据。
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
    var geoCoord = geoCoordMap[data[i].name];
    if (geoCoord) {
        res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
        });
    }
}

return res;
};
optionProvince = {
 title: {
     text: name_title,
 
     x: 'center'
 },
//tooltip，提示框显示内容
tooltip: {
    trigger: 'item',
    formatter: function(params) {

            var toolTiphtml = ''
            for(var i = 0;i<data.length;i++){
                if(params.name==data[i].name){
                    
                   
                        toolTiphtml+=data[i].name+':'+data[i].value+"<br>"
                    
                }
            }

            return toolTiphtml;
        
    }
},
//visualMap，视觉组件
visualMap: {
    show: true,
    min: 0,
    max: 200,
    left: 'left',
    top: 'bottom',
    text: ['高', '低'], // 文本，默认为数值文本
    calculable: true,
    seriesIndex: [1],
    inRange: {
        // color: ['#3B5077', '#031525'] // 蓝黑
        // color: ['#ffc0cb', '#800080'] // 红紫
        // color: ['#3C3B3F', '#605C3C'] // 黑绿
        // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
        // color: ['#23074d', '#cc5333'] // 紫红
        color: ['#00467F', '#A5CC82'] // 蓝绿
        // color: ['#1488CC', '#2B32B2'] // 浅蓝
        // color: ['#00467F', '#A5CC82'] // 蓝绿
        // color: ['#00467F', '#A5CC82'] // 蓝绿
        // color: ['#00467F', '#A5CC82'] // 蓝绿
        // color: ['#00467F', '#A5CC82'] // 蓝绿

    }
},
//geo，地理坐标系组件
geo: {
    show: true,
    map: mapName,
    label: {
        normal: {
            show: false
        },
        emphasis: {
            show: false,
        }
    },
    roam: true,
    itemStyle: {
        normal: {
            areaColor: '#031525',
            borderColor: '#3B5077',
        },
        emphasis: {
            areaColor: '#2B91B7',
        }
    }
},
series: [{//显示地图上各个省份坐标点，坐标点大小与招生人数成比例设置。
        name: '散点',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: convertData(data),
        symbolSize: function(val) {
            return val[2] / 10000+2;//显示大小最小为2
        },
        label: {
            normal: {
                formatter: '{b}',//数据项的名称，这里是省份名
                position: 'right',
                show: true
            },
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: '#05C3F9'
            }
        }
    },
    {//地图显示
        type: 'map',
        map: mapName,//显示中国地图
        geoIndex: 0,
        aspectScale: 0.75, //用于 scale 地图的长宽比
        showLegendSymbol: false, // 存在legend时显示
        label: {
            normal: {
                show: true
            },
            emphasis: {
                show: false,
                textStyle: {
                    color: '#fff'
                }
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#031525',
                borderColor: '#3B5077',
            },
            emphasis: {
                areaColor: '#2B91B7'
            }
        },
        animation: false,//是否开启动画
        data: data
    },
    {//以气泡的形式显示各省招生计划的值
        name: '点',
        type: 'scatter',
        coordinateSystem: 'geo',
        symbol: 'pin', //气泡
        symbolSize: function(val) {
           //将数据缩小，但保证最小气泡至少为20
            return val[2]/10000 + 20;
        },
        label: {
            normal: {
                formatter: function(a){return a.value[2];} ,//气泡上显示招生数 a.name是省份名，a.value是数组包含经度，维度，用户数据
                show: true,
                textStyle: {
                    color: '#fff',
                    fontSize: 8,
                }
            }
        },
        itemStyle: {
            normal: {
                color: '#F62157', //标志颜色
            }
        },
        zlevel: 6,
        data:convertData(data),//省份名，经度纬度，用户数据
    },
    {//显示招生前5的省份。
        name: 'Top 5',
        type: 'effectScatter',
        coordinateSystem: 'geo',
         //对数组排序，截取前五个数组对象
        data: convertData(data.sort(function(a, b) {
            return b.value - a.value;
        }).slice(0, 5)),
        symbolSize: function(val) {
            return val[2] / 10000;
        },
        showEffectOn: 'render',
        rippleEffect: {
            brushType: 'stroke'
        },
        hoverAnimation: true,
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: 'yellow',
                shadowBlur: 10,
                shadowColor: 'yellow'
            }
        },
        zlevel: 1
    },

]
};
provinceChart.setOption(optionProvince);
       </script>

<!-- 热门专业显示 -->

<script type="text/javascript">
    var dom_topn_max = document.getElementById("topnmax");
    //var topNMaxChart = echarts.init(dom_topn_max,"mytheme");
    var topNMaxChart = echarts.init(dom_topn_max);
    var app = {};
    option = null;
    option = {
       title: [{
       left: 'center',
       text: '招生最多的专业top 10'
   }],
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      yAxis: {
        type: "category",
        data: [(${hotmajorNameArr})],
      },
      xAxis: {
        type: "value",
      },
      series: [
        {
          data: [(${hotmajorplanArr})],
          type: "bar",
          label: {
            show: true,
            position: "right",
          },
        },
      ],
    };
    if (option && typeof option === "object") {
        topNMaxChart.setOption(option, true);
    }
  </script>
<!-- 冷门专业显示 -->
<script type="text/javascript">
    var dom_topn_min = document.getElementById("topnmin");
    //var topn_min_Chart = echarts.init(dom_topn_min,'mytheme');
    var topn_min_Chart = echarts.init(dom_topn_min);
    var app = {};
    option = null;
    option = {
       title: [{
       left: 'center',
       text: '招生最少的专业top 10'
   }],
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      yAxis: {
        type: "category",
        data:[(${coolmajorNameArr})],
      },
      xAxis: {
        type: "value",
      },
      series: [
        {
          data: [(${coolmajorplanArr})],
          type: "bar",
          label: {
            show: true,
            position: "right",
          },
        },
      ],
    };
    if (option && typeof option === "object") {
        topn_min_Chart.setOption(option, true);
    }
  </script>
</body>
</html>